<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿写小程序页面-瑞幸咖啡</title>
</head>
<body>
    <div class="timer">
        <!-- 时间显示 时分秒 -->
        <div id="timer">
            <h1>{{ formattedTime }}</h1>
        </div>
    </div>
    <div id="app">
        <h1>瑞幸咖啡</h1>
        <p>Hello,瑞幸咖啡user！</p>
        <!-- 导航栏点击并跳转到相应页面 -->
        <ul class="nav">
            <li><a href="./app.html">首页</a></li>
            <li><a href="./shop.html">商品</a></li>
            <li><a href="./VIP.html">VIP</a></li>
            <li><a href="./Login.html">登录</a></li>
            </ul>
    </div>
    <!-- 引入VUE CDN文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 用Vue实例化一个timer组件,并用定时器更新时间
  var timer = new Vue({
    el: '#timer',
    data: {
        time: new Date()
    },
    computed: {
        formattedTime() {
            const hours = this.time.getHours().toString().padStart(2, '0');
            const minutes = this.time.getMinutes().toString().padStart(2, '0');
            const seconds = this.time.getSeconds().toString().padStart(2, '0');
            return `${hours}:${minutes}:${seconds}`;
        }
    },
    mounted() {
        setInterval(() => {
            this.time = new Date();
        }, 1000); // 每秒钟更新一次时间
    }
});

    </script>
</body>
</html>